<template>
  <!-- 认证管理 -->
  <NavLayer> </NavLayer>
  <el-col style="background-color: #fff; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3)">
    <SearchLayer v-bind="search1" v-model="formData">
      <template #footer>
        <el-button type="primary" :icon="Search" style="margin-left: 0px; padding: 17px 15px" @click="query"
          >查询</el-button
        >
        <el-button type="success" :icon="Refresh" style="margin-left: 30px; padding: 17px 15px">重置</el-button>
      </template>
    </SearchLayer>
    <TableLayer v-bind="post" :tableData="tableData">
      <template #handler="scope">
        <el-button v-if="scope.row.status !== 0" class="green" type="text" @click="handleEdit(scope.row.id, scope.row)"
          >认证审核</el-button
        >
      </template>
      <template #status="scope">
        {{ scope.row.status === 0 ? '已认证' : '未认证' }}
      </template>
    </TableLayer>
    <el-col style="height: 100px"> </el-col>
  </el-col>
</template>

<script setup lang="ts">
import NavLayer from '@/components/yaolei/NavLayer.vue'
import SearchLayer from '@/components/yaolei/SearchLayer.vue'
import TableLayer from '@/components/yaolei/TableLayer.vue'
import { post } from '../../configfile/configtable'
import { search1 } from '../../searchconfig/one'
import { ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

interface User {
  serialNumber: number
  id: number
  name: string
  sex: string
  phone: string
  user: string
  state: boolean
  department: string
  auditTime: string
  status: number
}
let tableData: User[] = [
  {
    id: 1,
    serialNumber: 1,
    name: '张三',
    sex: '男',
    phone: '15008416976',
    user: '15008416976',
    state: true,
    department: '综合部',
    auditTime: '2021-12-07 14:24:56',
    status: 0
  },
  {
    id: 2,
    serialNumber: 2,
    name: '李四',
    sex: '女',
    phone: '15008416976',
    user: '15008416976',
    state: true,
    department: '市场部',
    auditTime: '2021-12-07 14:24:56',
    status: 0
  },
  {
    id: 3,
    serialNumber: 3,
    name: '王五',
    sex: '男',
    phone: '15008416976',
    user: '15008416976',
    state: true,
    department: '销售部',
    auditTime: '2021-12-07 14:24:56',
    status: 1
  }
]
const handleEdit = (id: number, row: User) => {
  console.log(id, row)
}

const stateModify = (el: any, row: any) => {
  // console.log(row)
  console.log(el)
}
const formItems = search1.my ?? []
let formDataInit: { [key: string]: any } = {}

formItems.map(item => {
  formDataInit[item.field] = ''
})

let formData = ref(formDataInit)
const query = () => {
  // 这里需要遍历搜索配置项，配置项里可以传dataType，要求数据返回什么类型的数据
  let queryInfo = { ...formData.value }
  console.log('132131', queryInfo)
  // search.my.map((item: any) => {
  //   if (item.dataType === 'number' && queryInfo[item.field] !== '') {
  //     queryInfo[item.field] = Number(queryInfo[item.field])
  //   }
  // })
  // 清空queryInfo中没有值的属性
  for (const i in queryInfo) {
    // if (queryInfo[i] === '') {
    //   delete queryInfo[i]
    // }
    console.log(queryInfo[i])
  }
  console.log(queryInfo)
}
</script>

<style scoped>
.green {
  color: #07b274;
}
</style>
